/* 
自定义的hook函数: 收集点击页面的坐标值
*/
import {
  ref,
  onMounted,
  onUnmounted
} from 'vue'

export default function useMousePosition() {
  const x = ref<number>(0)
  const y = ref(0)

  const clickHandler = (e: MouseEvent) => {
    console.log('点击了')
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => {
    // 给文档绑定点击监听, 收集事件坐标, 更新x/y
    document.addEventListener('click', clickHandler)
  })

  onUnmounted(() => {
    // 移除click事件
    document.removeEventListener('click', clickHandler)
  })


  return {
    x,
    y
  }
}